import { FC, useState } from 'react';
import { Card, Space, Spin, Switch, Alert } from 'antd';
const index: FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const toggle = () => {
    setLoading(!loading);
  }
  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      <Card title="Spin加载中...">
        <Space>
          <Spin size="small" />
          <Spin />
          <Spin size="large" />
        </Space>
      </Card>
      <Card title="卡片加载">
        <Spin spinning={loading}>
          <Alert
            message="Alert message title"
            description="Further details about the context of this alert."
            type="info"
          />
        </Spin>
        <div style={{ marginTop: 16 }}>
          Loading state：
          <Switch checked={loading} onChange={toggle} />
        </div>
      </Card>
    </Space>
  );
}

export default index;